<template>
  <div class="index">
    <div align="center">
    <h2 color="#409EFF" >用户管理</h2>

    <el-table
      :data="tableData"
      height="350"
      border
      style="width: 75%">
      <el-table-column
        prop="userID"
        label="用户ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button type="info" size="small" icon="el-icon-search">查看</el-button>
          <el-button type="primary" size="small" icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>&nbsp;&nbsp;
    </div>
    <div align="center">
      <el-button type="success" size="small" @click="dialogVisible = true" icon="el-icon-circle-plus-outline" >增加用户</el-button>
    </div>
    <el-dialog
      title="请输入用户信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>用户ID</span>
      <el-input v-model="input1" placeholder="请输入用户ID"></el-input>
      <span>用户姓名</span>
      <el-input v-model="input2" placeholder="请输入用户姓名"></el-input>
      <span>用户密码</span>
      <el-input placeholder="请输入用户密码" v-model="input3" show-password></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        input1: '',
        input2: '',
        input3: '',
        tableData: [{
          userID: '1001',
          username: '王大虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          userID: '1002',
          username: '王二虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          userID: '1003',
          username: '王三虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          userID: '1004',
          username: '王四虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          userID: '1005',
          username: '王五虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          userID: '1006',
          username: '王六虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          userID: '1007',
          username: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

<style lang="scss" scoped>

</style>
